<!doctype html>
<meta charset="utf-8">
 
<script src="http://jiecaogc.oss-cn-hangzhou.aliyuncs.com/d3.js"></script>
<script src="http://jiecaogc.oss-cn-hangzhou.aliyuncs.com/d3plus.js"></script>
<script src="http://jiecaogc.oss-cn-hangzhou.aliyuncs.com/topojson.js"></script> 

<div style="text-align: center;">
    <h3>不同加分档在各省市的人数分布</h3>
</div>
<div id="viz"></div> 
<script>
  var sample_data = [
    {"人数": 2, "省市": "北京", "加分档": "A档"},
    {"人数": 7, "省市": "北京", "加分档": "B档"},  
    {"人数": 5, "省市": "北京", "加分档": "C档"},
    {"人数": 1, "省市": "福建", "加分档": "A档"},  
    {"人数": 5, "省市": "福建", "加分档": "B档"},
    {"人数": 15, "省市": "福建", "加分档": "C档"},
    {"人数": 2, "省市": "贵州", "加分档": "A档"},
    {"人数": 5, "省市": "贵州", "加分档": "B档"},  
    {"人数": 4, "省市": "贵州", "加分档": "C档"},
    {"人数": 6, "省市": "河南", "加分档": "A档"},  
    {"人数": 9, "省市": "河南", "加分档": "B档"},
    {"人数": 31, "省市": "河南", "加分档": "C档"},
    {"人数": 9, "省市": "江苏", "加分档": "A档"},
    {"人数": 27, "省市": "江苏", "加分档": "B档"},  
    {"人数": 97, "省市": "江苏", "加分档": "C档"},
    {"人数": 2, "省市": "江西", "加分档": "A档"},
    {"人数": 5, "省市": "江西", "加分档": "B档"},  
    {"人数": 12, "省市": "江西", "加分档": "C档"},
    {"人数": 1, "省市": "辽宁", "加分档": "A档"},
    {"人数": 4, "省市": "辽宁", "加分档": "B档"},  
    {"人数": 11, "省市": "辽宁", "加分档": "C档"},
    {"人数": 20, "省市": "山东", "加分档": "A档"},
    {"人数": 24, "省市": "山东", "加分档": "B档"},  
    {"人数": 85, "省市": "山东", "加分档": "C档"},
    {"人数": 33, "省市": "上海", "加分档": "A档"},
    {"人数": 37, "省市": "上海", "加分档": "B档"},  
    {"人数": 84, "省市": "上海", "加分档": "C档"},
    {"人数": 3, "省市": "四川", "加分档": "A档"},
    {"人数": 9, "省市": "四川", "加分档": "B档"},  
    {"人数": 24, "省市": "四川", "加分档": "C档"}, 
    {"人数": 5, "省市": "云南", "加分档": "A档"},
    {"人数": 8, "省市": "云南", "加分档": "B档"},  
    {"人数": 37, "省市": "云南", "加分档": "C档"},
    {"人数": 6, "省市": "浙江", "加分档": "A档"},
    {"人数": 13, "省市": "浙江", "加分档": "B档"},  
    {"人数": 34, "省市": "浙江", "加分档": "C档"}, 
  ]

  var visualization = d3plus.viz()
    .container("#viz")
    .data(sample_data)
    .type("tree_map")
    .id(["加分档","省市"])
    .size("人数")
    .draw()

</script>
